<template>
  <div class="homePageWrap">
    <div>
      <div class="cardWrap" @click="getAreaInfo(0)">
        <div class="cardInner" style="background:linear-gradient(139deg,rgba(123,163,253,1),rgba(95,74,251,1));">
          <div class="iconcardWrap"><img src="./homeMap/card1.png" height="85" width="100"/></div>
          <div class="textWrapCard">
            <div class="textCardInner">{{initStatisInfo.onlineVehicleCount}}辆</div>
            <div class="textCardSmall">在线车辆数</div>
          </div>
        </div>
      </div>
      <div class="cardWrap" @click="getAreaInfo(1)">
        <div class="cardInner" style="background:linear-gradient(139deg,rgba(255,171,81,1),rgba(252,103,155,1));">
          <div class="iconcardWrap">
            <img src="./homeMap/card2.png" height="85" width="100"/>
          </div>
          <div class="textWrapCard">
            <div class="textCardInner">{{initStatisInfo.activeVehicleCount}}辆</div>
            <div class="textCardSmall">活跃车辆数</div>
          </div>
        </div>
      </div>
      <div class="cardWrap" @click="getAreaInfo(2)">
        <div class="cardInner" style="background:linear-gradient(139deg,rgba(204,103,242,1),rgba(117,82,245,1));">
          <div class="iconcardWrap">
            <img src="./homeMap/card4.png" height="85" width="98"/>
          </div>
          <div class="textWrapCard">
            <div class="textCardInner">{{initStatisInfo.registerVehicleCount}}辆</div>
            <div class="textCardSmall">备案车辆数</div>
          </div>
        </div>
      </div>
      <div class="cardWrap" @click="getAreaInfo(3)">
        <div class="cardInner" style="background: linear-gradient(139deg,rgba(87,197,172,1),rgba(60,138,201,1));">
          <div class="iconcardWrap">
            <img src="./homeMap/card3.png" height="85" width="86"/>
          </div>
          <div class="textWrapCard">
            <div class="textCardInner">{{initStatisInfo.cyclingCount}}次</div>
            <div class="textCardSmall">人均骑行次数</div>
          </div>
        </div>
      </div>
      <div class="cardWrap" @click="getAreaInfo(4)">
        <div class="cardInner" style="background:linear-gradient(139deg,rgba(92,190,227,1),rgba(82,101,245,1));">
          <div class="iconcardWrap">
            <img src="./homeMap/card5.png" height="85" width="86"/>
          </div>
          <div class="textWrapCard">
            <div class="textCardInner">{{initStatisInfo.elecLabelCount ? initStatisInfo.elecLabelCount : 0}}个</div>
            <div class="textCardSmall">电子标签数量</div>
          </div>
        </div>
      </div>
    </div>
    <div class="pageContentInner">
      <el-row style="width: 100%;height: 100%;">
        <el-col :span="15" style="height: 100%;overflow: hidden;">
          <div class="imgContentWrap">
            <div style="width: 100%;height: 100%;">
              <div class="imgMapWrap">
                <div v-show="showImg===true" style="width: 100%;height: 100%;">
                  <div class="imgTitle">
                    {{imgTitle}}

                  </div>
                  <div class="imgMapInner">
                    <div class="imgHomeWrap">
                      <img class="imgMapSty" src="./homeMap/mapBig.png"/>
                      <div v-for="(item,index) in homeImgPositions" :key="index"
                           @click="gotoMap(item.id)" class="areaListSty" :style="item.position">
                        <div>{{item.districtName}}</div>
                        <div>{{item.count}}</div>
                      </div>
                    </div>
                    <div v-show="type==0" class="gradeClass">
                      <div style="font-weight: bold;">全市街道排名</div>
                      <div style="text-align: right;" v-for="(item,index) in rankingList" :key="index">
                        {{item.regionName}}：{{item.onlineVehicleTotal}}
                      </div>
                    </div>
                    <div v-show="type<9" class="checkWrap" style="text-align: center;">
                      <el-radio-group v-model="checkboxGroup2" size="mini" @change="getAreaInfo(type,checkboxGroup2)">
                    <span style="display: inline-block;">
                      <el-radio-button :label="null">全部</el-radio-button></span>
                        <span class="companyInfoSty">{{totalCount}}</span>

                        <span v-for="(item,index) in $store.state.companyInfos" :key="index">
                    <span style="display: inline-block;">
                      <el-radio-button :label="item.enterpriseNo">{{item.enterpriseName}}</el-radio-button></span>
                    <span class="companyInfoSty">{{item.count}}</span>
                  </span>
                      </el-radio-group>
                    </div>
                  </div>
                </div>
                <div v-show="!showImg" style="position: absolute;left: 0;right: 0;bottom: 0;top: 0;">
                  <homeMap :showImg="showImg" :type="type" ref="homeMap" @changeImgShow="changeImgShow"
                           :mapInfo="mapInfo"></homeMap>
                </div>
                <div v-show="showImg=='echarts'" style="height: 100%;width: 100%;">
                  <bikeEcharts ref="bikeEcharts" :echartsData="echartsData"></bikeEcharts>
                </div>
              </div>
              <div class="bottomInfoWrap">
                <el-radio-group v-model="radio4" style="width: 100%;" @change="getAreaInfo(radio4)">
                  <el-row :gutter="10" style="height: 100%">
                    <el-col :span="6" style="height: 100%;">
                      <el-radio-button :label="5" style="height: 100%;width: 100%;">
                        <div class="textBikeWrap">
                          <div class="textBikeFirst">{{initStatisInfo.orderCount}}</div>
                          <div class="textBikeSecond">日均订单数
                          <span class="selectMini">
                          <el-select style="width: 90px;" @change="getAreaInfo(5)" v-model="intervalDay1" size="mini"
                                     placeholder="案件类型">
                            <el-option
                              v-for="item in options"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                            </span>
                          </div>
                        </div>
                      </el-radio-button>
                    </el-col>
                    <el-col :span="6" style="height: 100%;">
                      <el-radio-button :label="6" style="height: 100%;">
                        <div class="textBikeWrap"
                        >
                          <div class="textBikeFirst">{{initStatisInfo.vehicleRevolveCount}}</div>
                          <div class="textBikeSecond">车辆周转率
                           <span class="selectMini">
                          <el-select style="width: 90px;" @change="getAreaInfo(6)" v-model="intervalDay2" size="mini"
                                     placeholder="案件类型">
                            <el-option
                              v-for="item in options"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                            </span>
                          </div>
                        </div>
                      </el-radio-button>
                    </el-col>
                    <el-col :span="6" style="height: 100%;">
                      <el-radio-button :label="7" style="height: 100%;">
                        <div class="textBikeWrap"
                        >
                          <div class="textBikeFirst">{{initStatisInfo.zombieVehicleCount}}</div>
                          <div class="textBikeSecond">僵尸车辆数</div>
                        </div>
                      </el-radio-button>
                    </el-col>
                    <el-col :span="6" style="height: 100%;">
                      <el-radio-button :label="8" style="height: 100%;">
                        <div class="textBikeWrap">
                          <div class="textBikeFirst">
                            {{initStatisInfo.violationCaseCount ? initStatisInfo.violationCaseCount : 0}}


                          </div>
                          <div class="textBikeSecond">智能巡查案件
                           <span class="selectMini">
                          <el-select style="width: 90px;" @change="getAreaInfo(8)" v-model="intervalDay3" size="mini"
                                     placeholder="案件类型">
                            <el-option
                              v-for="item in options"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                            </span>
                          </div>
                        </div>
                      </el-radio-button>
                    </el-col>
                  </el-row>
                </el-radio-group>

              </div>
            </div>
            <div class="bottomInfoWrap2">
              <el-radio-group v-model="radio5" style="width: 100%;" @change="getAreaInfo(radio5)">
                <el-row :gutter="10" style="height: 100%">
                  <el-col :span="6" style="height: 100%;">
                    <el-radio-button :label="9" style="height: 100%;width: 100%;">
                      <div class="textBikeWrap">
                        <div class="textBikeFirst">{{initStatisInfo.elecFenceCount}}</div>
                        <div class="textBikeSecond">电子停放区数量</div>
                      </div>
                    </el-radio-button>
                  </el-col>
                  <el-col :span="6" style="height: 100%;">
                    <el-radio-button :label="10" style="height: 100%;">
                      <div class="textBikeWrap"
                      >
                        <div class="textBikeFirst">{{initStatisInfo.packSiteCount ? initStatisInfo.packSiteCount : 0}}


                        </div>
                        <div class="textBikeSecond">智能车桩数量</div>
                      </div>
                    </el-radio-button>
                  </el-col>
                  <el-col :span="6" style="height: 100%;">
                    <el-radio-button :label="11" style="height: 100%;">
                      <div class="textBikeWrap"
                      >
                        <div class="textBikeFirst">{{initStatisInfo.areaCount}}</div>
                        <div class="textBikeSecond">停放区数量统计</div>
                      </div>
                    </el-radio-button>
                  </el-col>
                  <el-col :span="6" style="height: 100%;">
                    <el-radio-button :label="12" style="height: 100%;">
                      <div class="textBikeWrap">
                        <div class="textBikeFirst">{{initStatisInfo.standardAreaCount}}</div>
                        <div class="textBikeSecond">规范停放区数量统计</div>
                      </div>
                    </el-radio-button>
                  </el-col>
                </el-row>
              </el-radio-group>
            </div>
          </div>

        </el-col>
        <el-col :span="9" style="height: 100%;">
          <div class="rightInfoWrap">
            <div class="rightInfoheader">
              <el-row>
                <el-col :span="4">
                  <el-select @change="selectCaseScroll" v-model="searchInfo.reportResource" size="mini"
                             placeholder="信息来源">
                    <el-option
                      v-for="item in options1"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <div>
                    <el-select @change="selectCaseScroll" v-model="searchInfo.enterpriseNo" size="mini"
                               placeholder="企业">
                      <el-option
                        styel="width:100%;"
                        v-for="item in companyInfos"
                        :key="item.enterpriseNo+''"
                        :label="item.enterpriseName"
                        :value="item.enterpriseNo+''">
                      </el-option>
                    </el-select>
                  </div>

                </el-col>
                <el-col :span="4">
                  <el-select @change="selectCaseScroll" v-model="searchInfo.districtId" size="mini" placeholder="行政区">
                    <el-option
                      v-for="item in districtData"
                      :key="item.id"
                      :label="item.regionName"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="8">
                  <div style="width: 70%;text-align: center;margin: 0 auto;">
                    <el-select @change="selectCaseScroll" v-model="searchInfo.reportType" size="mini"
                               placeholder="案件类型">
                      <el-option
                        v-for="item in options2"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </div>

                </el-col>
                <el-col :span="4">
                  <el-select @change="selectCaseScroll" v-model="searchInfo.reportStatus" size="mini" placeholder="状态">
                    <el-option
                      v-for="item in options3"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
              </el-row>
            </div>
            <vue-seamless-scroll :data="prizeList" :class-option="optionSingleHeight" class="seamless-warp">
              <el-row v-for="(item,index) in prizeList" :key="index" class="hoverSty" style="cursor: pointer;">
                <el-col :span="4">
                  <div class="textSwipe">
                    &nbsp;{{item.reportResource == 1 ? "政府巡查" : item.reportResource == 2 ? "群众举报" : item.reportResource == 3 ? "智能案件" : ""}}

                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="textSwipe">
                    &nbsp;{{item.enterpriseName}}

                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="textSwipe">
                    &nbsp;{{item.districtName}}

                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="textSwipe">
                    <span v-for="(item1,index) in item.reportType" :key="index+10000">
                      {{item1 == 1 ? "乱停乱放" : item1 == 2 ? "损坏车辆" : item1 == 3 ? "其它" : item1 == 4 ? "违规投放" : item1 == 5 ? "区域超量" : ""}}
                    </span>
                    <!--&nbsp;{{item.reportType == 1 ? "乱停乱放" : item.reportType == 2 ? "损坏车辆" : item.reportType == 3 ? "其它" : item.reportType == 4 ? "违规投放" : item.reportType == 5 ? "区域超量" : ""}}-->

                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="textSwipe">
                    &nbsp;{{item.reportStatus == 0 ? "未处理" : item.reportStatus == 1 ? "已退回" : item.reportStatus == 2 ? "已处理" : item.reportStatus == 3 ? "已结案" : ""}}


                  </div>
                </el-col>
              </el-row>
            </vue-seamless-scroll>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import homeMap from './homeMap/homeMap.vue'
  import bikeEcharts from './homeMap/bikeEcharts.vue'
  export default {
    data(){
      return {
        initStatisInfo: {},
        showImg: true,
        checkboxGroup2: null,
        CompanyCountList: [],
        rankingList: [],
        echartsData: [],
        totalCount: 0,
        imgTitle: "",
        searchInfo: {
          reportResource: "",
          districtId: "",
          reportType: "",
          reportStatus: "",
          enterpriseNo: "",
        },
        districtData: [
          {"id": "", "regionName": "全部区域", "cityId": 1, "provinceId": 1}
        ],
        options: [
          {
            value: '1',
            label: '昨天'
          },
          {
            value: '7',
            label: '七日'
          }, {
            value: '30',
            label: '三十日'
          }],
        companyInfos: [{enterpriseNo: '', enterpriseName: "全部企业"}],
        options1: [
          {
            value: '',
            label: '信息来源'
          },
          {
            value: '1',
            label: '政府巡查'
          }, {
            value: '2',
            label: '群众举报'
          }, {
            value: '3',
            label: '智能案件'
          }],
        options2: [
          {
            value: '',
            label: '案件类型'
          },
          {
            value: '1',
            label: '乱停乱放'
          }, {
            value: '2',
            label: '损坏车辆'
          }, {
            value: '4',
            label: '违规投放'
          }, {
            value: '5',
            label: '区域超量'
          }, {
            value: '3',
            label: '其它'
          }],
        options3: [
          {
            value: '',
            label: '处置状态'
          },
          {
            value: '0',
            label: '未处理'
          }, {
            value: '1',
            label: '已退回'
          }/*, {
            value: '2',
            label: '已处理'
          }, {
            value: '3',
            label: '已结案'
          }*/],
        prizeList: [],
        homeImgPositions: [
          {districtName: "宝安区", position: "left: 11%;top: 46%;", count: "0", id: 4,},
          {districtName: "光明新区", position: "left: 17%;top: 19%;", count: "0", id: 9,},
          {districtName: "南山区", position: "left: 22%;top: 65%;", count: "0", id: 3,},
          {districtName: "龙华区", position: "left: 29%;top: 36%;", count: "0", id: 7,},
          {districtName: "福田区", position: "left: 32%;top: 70%;", count: "0", id: 2,},
          {districtName: "龙岗区", position: "left: 53%;top: 36%;", count: "0", id: 5,},
          {districtName: "罗湖区", position: "left: 43%;top: 65%;", count: "0", id: 1,},
          {districtName: "盐田区", position: "left: 57%;top: 58%;", count: "0", id: 6,},
          {districtName: "坪山区", position: "left: 68%;top: 38%;", count: "0", id: 8,},
          {districtName: "大鹏新区", position: "left: 79%;top: 54%;", count: "0", id: 10,},
        ],
        type: 0,
        intervalDay1: "1",
        intervalDay2: "1",
        intervalDay3: "1",
        mapInfo: {},
        value: '',
        radio4: '',
        radio5: ''
      }
    },
    components: {homeMap, bikeEcharts},
    created(){
      this.getinitStatisInfo()
      this.selectCaseScroll()
    },
    mounted(){
      this.getAreaInfo(0)
      this.$store.state.companyInfos.forEach(item => {
        this.companyInfos.push(item)
      })
      this.$store.state.districtData.forEach(item => {
        this.districtData.push(item)
      })
    },
    computed: {
      optionSingleHeight () {
        return {
          step: 0.2, // 数值越大速度滚动越快
          singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          waitTime: 0 // 单步运动停止的时间(默认值1000ms)
          /* limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
           hoverStop: true, // 是否开启鼠标悬停stop
           direction: 0, // 0向下 1向上 2向左 3向右
           openWatch: true, // 开启数据实时监控刷新dom
           singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
           singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
           waitTime: 1000 // 单步运动停止的时间(默认值1000ms)*/
        }
      }
    },
    methods: {
      gotoMap(id){
        if (this.type == 4 || this.type == 8 || this.type == 6) {
          this.$message({
            type: 'warning',
            message: "不支持街道查询"
          });
          return
        }
        this.$refs.homeMap.getBoundaryDemo(id)
      },
      selectCaseScroll(){

        this.axios.post(process.env.API_HOST + '/statis/selectCaseScroll', this.searchInfo)
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              this.prizeList = result.result
            }
          })
      },
      getAreaInfo(key, enterpriseNo){
        if (key == 2) {
          this.showImg = 'echarts'
          this.radio4 = ""
          this.radio5 = ""
          this.axios.post(process.env.API_HOST + '/statis/selectRegisterVehicleSum', {})
            .then(response => {
              const result = response.data
              this.echartsData = [[], [], [], []]
              if (result.code === 200 && result.result) {
                result.result.forEach(item => {
                  this.echartsData[0].push(item.registerVehicleTotal)
                  this.echartsData[1].push(item.bluetoothVehicleTotal)
                  this.echartsData[2].push(item.onlineVehicleTotal)
                  this.echartsData[3].push(item.cyclingVehicleTotal)
                })
                this.$refs.bikeEcharts.initData()
              }
            })
          return
        } else {
          this.showImg = true
        }
        this.type = key
        if (key != 5 && key != 6 && key != 7 && key != 8) {
          this.radio4 = ""
        }
        if (key != 9 && key != 10 && key != 11 && key != 12) {
          this.radio5 = ""
        }
        let url = "", objName = "", formData = {}
        switch (key) {
          case 0: //在线车辆
            url = 'selectOnlineVehicleSum'
            objName = "onlineVehicleTotal"
            this.imgTitle = "在线车辆数"
            break;
          case 1:   //活跃车辆
            url = 'selectActiveVehicleSum'
            objName = "activeVehicleTotal"
            this.imgTitle = "活跃车辆数"
            break;
          case 2:   //备案车辆
            url = 'selectRegisterVehicleSum'
            objName = "registerVehicleTotal"
            this.imgTitle = "备案车辆数"
            break;
          case 3:   //人均骑行
            url = 'selectCyclingCountSum'
            objName = "cyclingAvgCount"
            this.imgTitle = "人均骑行次数"
            break;
          case 4:   //电子标签
            url = 'selectElecLabelSum'
            objName = "labelTotal"
            this.imgTitle = "电子标签数量"
            break;
          case 5:   //日均订单
            url = 'selectOrderSum'
            objName = "orderTotal"
            formData = {
              intervalDay: this.intervalDay1,
              parentId: 0,
              regionType: 0,
              enterpriseNo: enterpriseNo ? enterpriseNo : ""
            }
            this.radio4 = key
            this.imgTitle = "日均订单数"
            break;
          case 6:   //车辆周转率
            url = 'selectVehicleRevolveSum'
            objName = "revolveRate"
            formData = {
              intervalDay: this.intervalDay2,
              parentId: 0,
              regionType: 0,
              enterpriseNo: enterpriseNo ? enterpriseNo : ""
            }
            this.radio4 = key
            this.imgTitle = "车辆周转率"
            break;
          case 7:   //僵尸车辆
            url = 'selectZombieVehicleSum'
            objName = "zombieVehicleTotal"
            this.imgTitle = "僵尸车辆数"
            break;
          case 8:   //智能巡查案件
            url = 'selectViolationCaseSum'
            objName = "caseTotal"
            formData = {
              intervalDay: this.intervalDay3,
              parentId: 0,
              regionType: 0,
              enterpriseNo: enterpriseNo ? enterpriseNo : ""
            }
            this.radio4 = key
            this.imgTitle = "智能巡查案件"
            break;
          case 9:   //电子停放区    无企业
            url = 'selectElecFenceSum'
            objName = "fenceTotal"
            this.imgTitle = "电子停放区数量"
            break;
          case 10:   //智能车桩
            url = 'selectParkSiteSum'
            objName = "packTotal"
            this.imgTitle = "智能车桩数量"
            break;
          case 11:   //停放区统计
            url = 'selectAreaSum'
            objName = "areaTotal"
            formData = {
              areaType: 0,
              parentId: 0,
              regionType: 0,
            }
            this.imgTitle = "停放区数量统计"
            break;
          case 12:   //规范停放区
            url = 'selectAreaSum'
            objName = "areaTotal"
            formData = {
              areaType: 2,
              parentId: 0,
              regionType: 0,
            }
            this.imgTitle = "规范停放区统计"
            break;
          default:
            url = 'selectActiveVehicleSum'
            objName = "activeVehicleTotal"
        }

        if (key < 5 || key == 7 || key == 9 || key == 10) {
          formData = {
            parentId: 0,
            regionType: 0,
            enterpriseNo: enterpriseNo ? enterpriseNo : ""
          }
        }
        this.mapInfo = {
          url: url,
          objName: objName,
          intervalDay1: this.intervalDay1,
          intervalDay2: this.intervalDay2,
          intervalDay3: this.intervalDay3,
        }
        this.axios.post(process.env.API_HOST + '/statis/' + url, formData)
          .then(response => {
            const result = response.data
            this.resetInfo(1)
            if (result.code === 200 && result.result) {
              if (key == 0) {
                this.rankingList = result.result.rankingList ? result.result.rankingList : []
              }
              if (key < 9 && result.result.list) {
                result.result.list.forEach(item => {
                  this.homeImgPositions.forEach(item1 => {
                    if (item.regionId == item1.id) {
                      item1.count = item[objName] ? item[objName] : 0
                    }
                  })
                })

                if (!enterpriseNo) {
                  this.resetInfo(2)

                  this.totalCount = result.result.totalSum
                  if (key == 5) {
                    this.initStatisInfo.orderCount = this.totalCount
                  } else if (key == 6) {
                    this.totalCount = result.result.revolveRate
                    this.initStatisInfo.vehicleRevolveCount = this.totalCount
                  } else if (key == 8) {
                    this.initStatisInfo.violationCaseCount = this.totalCount
                  } else if (key == 3) {
                    this.totalCount = result.result.avgCount
                  }
                  this.$store.state.companyInfos.forEach((item, index) => {
                    result.result.enterpriseList.forEach(item1 => {
                      if (item.enterpriseNo == item1.enterpriseNo) {
                        item.count = item1[objName] ? item1[objName] : 0
                      }
                    })

                  })
                }
              } else if (result.result) {
                result.result.forEach(item => {
                  this.homeImgPositions.forEach(item1 => {
                    if (item.regionId == item1.id) {
                      item1.count = item[objName] ? item[objName] : 0
                    }
                  })
                })
              }
            }
          })
      },
      resetInfo(key){
        if (key == 1) {
          this.homeImgPositions = [
            {districtName: "宝安区", position: "left: 11%;top: 46%;", count: "0", id: 4,},
            {districtName: "光明新区", position: "left: 17%;top: 19%;", count: "0", id: 9,},
            {districtName: "南山区", position: "left: 22%;top: 65%;", count: "0", id: 3,},
            {districtName: "龙华区", position: "left: 29%;top: 36%;", count: "0", id: 7,},
            {districtName: "福田区", position: "left: 32%;top: 70%;", count: "0", id: 2,},
            {districtName: "龙岗区", position: "left: 53%;top: 36%;", count: "0", id: 5,},
            {districtName: "罗湖区", position: "left: 43%;top: 65%;", count: "0", id: 1,},
            {districtName: "盐田区", position: "left: 57%;top: 58%;", count: "0", id: 6,},
            {districtName: "坪山区", position: "left: 68%;top: 38%;", count: "0", id: 8,},
            {districtName: "大鹏新区", position: "left: 79%;top: 54%;", count: "0", id: 10,},
          ]
        }
        if (key == 2) {
          this.totalCount = 0
          this.$store.state.companyInfos.forEach((item) => {
            item.count = 0
          })
        }
      },
      changeImgShow(){
        this.showImg = !this.showImg
      },
      //     获取数据
      getinitStatisInfo(){
        this.axios.post(process.env.API_HOST + '/statis/initStatis', {})
          .then(response => {
            const result = response.data
            if (result.code === 200) {
              this.initStatisInfo = result.result
            } else {
              this.initStatisInfo = {}
            }
          })

      }
    },
    watch: {
      '$route' (to, from) {
        // 对路由变化作出响应...

      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  .homePageWrap
    page()
    left 0px
    right 5px
    .cardWrap
      border-radius: 5px;
      height: 100px;
      width: 100%;
      float: left;
      width: 20%;
      padding: 0 5px;
      box-sizing: border-box;
      position: relative;
      cursor pointer
      .cardInner
        height: 100%;
        width: 100%;
        border-radius: 5px;
        overflow: hidden;
        box-shadow: 0px 7px 13px 0px rgba(13, 13, 14, 0.15);
        &:hover
          box-shadow: 0px 7px 13px 0px rgba(57, 117, 254, 0.6);
        .iconcardWrap
          position absolute
          left 5px
          bottom 0px
        .iconfont
          font-size: 80px;
          color: white;
          opacity 0.4;
        .textWrapCard
          position: absolute;
          right: 35px;
          top: 0px;
          overflow: hidden;
          .textCardInner
            font-size: 29px;
            color: white;
            margin-top: 20px;
            text-align: right;
          .textCardSmall
            font-size: 14px;
            color: white;
            margin-top: 15px;
            text-align: right;
    .seamless-warp
      padding-top 38px
      height: 100%;
      overflow: hidden;
    .pageContentInner
      position absolute
      left 5px
      right 5px
      bottom 0px
      top 110px
      border-radius 5px
      .imgContentWrap
        overflow-x: hidden;
        overflow-y: auto;
        height: 100%;
        width: 100%;
        position: relative;
        padding-right: 17px
        .imgMapWrap
          background-color: white;
          border-radius: 5px;
          position: absolute;
          left: 0;
          right: 0;
          bottom: 65px;
          top: 0;
          text-align: center;
          .imgTitle
            color: #3975FE;
            font-size: 17px;
            text-align: center;
            font-weight: bold;
            position: absolute;
            top: 15px;
            width: 100%;
          .imgMapInner
            margin-top: 12px;
            position: relative;
            height: 100%;
            .gradeClass
              position: absolute;
              right: 20px;
              top: 10px;
              color: #3975FE;
              line-height: 25px;
              font-size: 12px;
              font-weight: bold;
            .imgHomeWrap
              height: 87%;
              position: relative;
              display: inline-block;
              margin: 0 auto;
              .imgMapSty
                height: 100%;
                max-width 100%
                display: inline-block;
              .areaListSty
                display: inline-block;
                font-size: 11px;
                color: white;
                line-height: 15px;
                position: absolute;
                cursor pointer;
            .companyInfoSty
              font-size: 14px;
              color: #3975FE;
              font-weight: bold;
              margin-left: 11px;
              margin-right: 15px;
              line-height: 24px;
              vertical-align: middle;
            .checkWrap
              .el-radio-button
                .el-radio-button__inner
                  border-radius 10px
                  padding 5px 15px
              .is-active
                .el-radio-button__inner
                  background-color: #3975FE
                  border-radius 10px
                  border-color #3975FE
      .bottomInfoWrap2
        margin-top: 10px;
        border-radius: 5px;
        height: 55px;
        width: 100%;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        .el-radio-group
          height 100%
          .el-radio-button
            width 100%
            height 100%
            &.is-active .textBikeWrap
              background-color #3975FE
              .textBikeFirst, .textBikeSecond
                color white
            .el-radio-button__inner
              width 100%
              height 100%
              padding 0 !important
              border none
              border-radius 6px

      .bottomInfoWrap
        margin-top: 10px;
        border-radius: 5px;
        height: 55px;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0px;
        .el-radio-group
          height 100%
          .el-radio-button
            width 100%
            height 100%
            &.is-active .textBikeWrap
              background-color #3975FE
              .textBikeFirst, .textBikeSecond
                color white
            .el-radio-button__inner
              width 100%
              height 100%
              padding 0 !important
              border none
              border-radius 6px
        .selectMini
          display: inline-block;
          width: 90px;
          vertical-align middle;
          line-height 20px;
          margin-bottom 5px;
          .el-select
            float right !important
          .el-input--mini
            height 20px
          .el-input--mini, .el-input__inner, .el-range-editor--mini
            height: 20px !important;
            line-height: 20px !important;
      /*padding 0px !important
      padding-left 10px*/
      .textBikeWrap
        height: 100%;
        text-align: center;
        background-color: white;
        border-radius: 5px;
        text-align: center;
        .textBikeFirst
          font-size: 23px;
          font-weight: bold;
          line-height: 35px;
          color: #3975FE;
        .textBikeSecond
          font-size: 12px;
          color: #898A8A;
      .rightInfoWrap
        overflow hidden
        background-color: white;
        height: 100%;
        margin-left 10px
        border-radius: 5px;
        position relative
        input:
        :-webkit-input-placeholder { /* WebKit browsers */
          color: white;
        }
        input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
          color: white;
        }
        input:
        :-moz-placeholder { /* Mozilla Firefox 19+ */
          color: white;
        }
        input:-ms-input-placeholder { /* Internet Explorer 10+ */
          color: white;
        }

        .rightInfoheader
          box-shadow: 0px 7px 13px 0px rgba(13, 13, 14, 0.15);
          background-color: #3975FE;
          border-radius: 5px;
          height: 35px;
          line-height: 35px;
          color: white;
          font-weight: bold;
          font-size: 14px;
          position absolute;
          left 0;
          top 0;
          right 0;
          z-index 10
          padding-top 5px
          box-sizing border-box
        .el-input__suffix-inner
          display none
        .el-input--mini .el-input__inner
          background-color #3975FE
          color white
          border none
          padding 0 5px !important;
          text-align center !important
        .textSwipe
          width 100%
          text-align: center;
          line-height: 25px;
          color: #898A8A;
          font-size: 12px;
        .hoverSty:hover .textSwipe
          color #3975FE

</style>
